class Vue {
    constructor(options) {
        this.$options = options
        // TODO: data可能是函数
        this._data = options.data
        this.initData()
    }
    initData() {
        let data = this._data
        let keys = Object.keys(data)
        for(let i=0;i<keys.length;i++){
            Object.defineProperty(this, keys[i], {
                enumerable: true,
                configurable: true,
                get: function proxyGetter() {
                    return data[keys[i]]
                },
                set: function proxySetter(value) {
                    data[keys[i]] = value
                }
            })
        }
        observe(data)
    }
}

function observe(data) {
    let type = Object.prototype.toString.call(data)
    // console.log('type:', type);
    if(type !== '[object Object]' && type !== '[object Array]') {
        return
    }
    new Observer(data)
}

function defineReactive(obj, key, value) {
    observe(obj[key])
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            console.log('person取值', value);
            return value
        },
        set: function reactiveSetter(val) {
            if(val === value) return
            console.log('设置了这个值');
            value = val
        }
    })
}

class Observer {
    constructor(data) {
        this.walk(data)
    }
    walk(data) {
        let keys = Object.keys(data)
        for(let i=0;i<keys.length;i++){
            console.log(keys[i], data[keys[i]]);
            defineReactive(data, keys[i], data[keys[i]])
        }
    }
}